<template>
  <div class="news-list">
    <index-header></index-header>
    <!-- <detail-sec-header :FirstName="this.productName"></detail-sec-header> -->
    <div class="body container">
        <list :data="this.data"></list>
        <list-right></list-right>
    </div>
    <div class="bg container">`
            <el-pagination
            class="fenye"
            background
            layout="prev, pager, next"
            :page-size="this.size"
            :total="this.total"
            @current-change="handleCurrentChange"
            :current-page.sync="page"
           >
            </el-pagination>
    </div>
    <div class="process container"><img src="@/assets/news-list/process.png" alt=""></div>
    <index-footer></index-footer>
    
    <!-- <div class="show"></div> -->
  </div>

  
</template>

<script>
import IndexHeader from './../Index/components/Header.vue';
import IndexFooter from './../Index/components/Footer.vue';
// import DetailSecHeader from './../ProductDetail/components/SecHeader.vue';
import List from './components/List.vue';
import ListRight from './components/Right.vue';

import { mapState } from 'vuex'
import axios from 'axios'
export default {
    name: 'DesignList',
    components:{
    IndexHeader,
    // DetailSecHeader,
    IndexFooter,
    List,
    ListRight
    },
    data () {
    return {
        productName:'新闻资讯',
        page:1,
        size:12,
        total:1,
        data:[]
    }
    },
    computed:{
    ...mapState(['baseUrl'])
    },
    watch: {
      
    },
    mounted(){
        // console.log('mounted')
        this.getPageInit()
    },
    methods:{
        handleCurrentChange(val) {
        //  console.log(`当前页: ${val}`);
         this.page = val;
         this.getPageInit();
        //  this.getPageInit();
        },
       //产品列表
        getPageInit(){
            axios.get(this.baseUrl+'cms/design/all',
            {
                params:{
                    page:this.page,
                    size:this.size,

                }
            }).then(this.pageInit)
        },
        pageInit(response){
            // console.log(response)
            this.data = response.data.data
            this.total = response.data.count;
        }
        

    }
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
html 
    transition all 0.3s
.show
    height 400px
.container 
    container()
.body
    overflow hidden
    margin-top 50px
.news-list
    background #f0f1f2

.bg 
    height 60px
    background #e3e4e6
    position relative
.fenye 
    position absolute
    left 50%
    top 50%
    transform translate3d(-50%,-50%,0);
.process 
    margin-top 150px
    margin-bottom 50px
</style>
